<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">健康问答</view>
            <view class="right">
                <u-icon name="search" size="32" color="#333" @click="showSearch"></u-icon>
            </view>
        </view>
        
        <!-- 搜索框 -->
        <view class="search-bar" v-if="showSearchBar">
            <view class="search-input">
                <u-icon name="search" size="28" color="#999"></u-icon>
                <input 
                    type="text" 
                    v-model="searchText" 
                    placeholder="搜索问题"
                    @confirm="search"
                />
                <u-icon 
                    v-if="searchText" 
                    name="close" 
                    size="28" 
                    color="#999"
                    @click="clearSearch"
                ></u-icon>
            </view>
            <text class="cancel" @click="hideSearch">取消</text>
        </view>
        
        <!-- 分类列表 -->
        <scroll-view class="categories" scroll-x>
            <view 
                class="category-item" 
                v-for="(item, index) in categories" 
                :key="index"
                :class="{ active: currentCategory === index }"
                @click="switchCategory(index)"
            >
                <view class="icon" :style="{ backgroundColor: item.color }">
                    <u-icon :name="item.icon" size="32" color="#fff"></u-icon>
                </view>
                <text>{{item.name}}</text>
            </view>
        </scroll-view>
        
        <!-- 问题列表 -->
        <scroll-view 
            class="questions" 
            scroll-y 
            @scrolltolower="loadMore"
            refresher-enabled
            :refresher-triggered="refreshing"
            @refresherrefresh="onRefresh"
        >
            <view 
                class="question-item" 
                v-for="(item, index) in questionList" 
                :key="index"
                @click="viewQuestion(item)"
            >
                <view class="header">
                    <view class="title">{{item.title}}</view>
                    <view class="status" :class="item.status">{{item.statusText}}</view>
                </view>
                
                <view class="content">{{item.content}}</view>
                
                <view class="images" v-if="item.images.length > 0">
                    <image 
                        v-for="(img, imgIndex) in item.images" 
                        :key="imgIndex"
                        :src="img"
                        mode="aspectFill"
                        @click="previewImage(item.images, imgIndex)"
                    ></image>
                </view>
                
                <view class="footer">
                    <view class="user">
                        <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
                        <text>{{item.name}}</text>
                    </view>
                    <view class="meta">
                        <view class="item">
                            <u-icon name="eye" size="24" color="#999"></u-icon>
                            <text>{{item.views}}</text>
                        </view>
                        <view class="item">
                            <u-icon name="message" size="24" color="#999"></u-icon>
                            <text>{{item.answers}}</text>
                        </view>
                        <view class="item">
                            <u-icon name="clock" size="24" color="#999"></u-icon>
                            <text>{{item.time}}</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 加载更多 -->
            <view class="loading" v-if="loading">
                <view class="loading-icon"></view>
                <text>加载中...</text>
            </view>
            
            <!-- 没有更多 -->
            <view class="no-more" v-if="!hasMore">
                <text>没有更多了</text>
            </view>
            
            <!-- 空状态 -->
            <view class="empty" v-if="questionList.length === 0">
                <image src="/static/images/empty.png" mode="aspectFit"></image>
                <text>暂无内容</text>
            </view>
        </scroll-view>
        
        <!-- 提问按钮 -->
        <view class="ask-btn" @click="askQuestion">
            <u-icon name="plus" size="32" color="#fff"></u-icon>
            <text>我要提问</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showSearchBar: false,
            searchText: '',
            categories: [
                {
                    name: '全部',
                    icon: 'list',
                    color: '#1890FF'
                },
                {
                    name: '高血压',
                    icon: 'heart',
                    color: '#FF4D4F'
                },
                {
                    name: '糖尿病',
                    icon: 'food',
                    color: '#52C41A'
                },
                {
                    name: '心脏病',
                    icon: 'heart',
                    color: '#1890FF'
                },
                {
                    name: '饮食',
                    icon: 'food',
                    color: '#FAAD14'
                },
                {
                    name: '运动',
                    icon: 'sport',
                    color: '#722ED1'
                },
                {
                    name: '用药',
                    icon: 'medicine',
                    color: '#13C2C2'
                }
            ],
            currentCategory: 0,
            questionList: [
                {
                    id: 1,
                    title: '高血压患者应该如何控制饮食？',
                    content: '我今年45岁，最近被诊断出高血压，医生建议我控制饮食，请问具体应该注意哪些方面？',
                    status: 'answered',
                    statusText: '已解答',
                    name: '张先生',
                    avatar: '/static/images/avatar.png',
                    time: '2024-03-20',
                    views: 128,
                    answers: 5,
                    images: []
                }
            ],
            loading: false,
            hasMore: true,
            refreshing: false,
            page: 1
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        showSearch() {
            this.showSearchBar = true
        },
        hideSearch() {
            this.showSearchBar = false
            this.searchText = ''
        },
        clearSearch() {
            this.searchText = ''
        },
        search() {
            if (!this.searchText.trim()) {
                uni.showToast({
                    title: '请输入搜索内容',
                    icon: 'none'
                })
                return
            }
            
            // 模拟搜索
            this.page = 1
            this.questionList = []
            this.loadQuestions()
        },
        switchCategory(index) {
            this.currentCategory = index
            this.page = 1
            this.questionList = []
            this.loadQuestions()
        },
        loadQuestions() {
            if (this.loading) return
            
            this.loading = true
            
            // 模拟加载数据
            setTimeout(() => {
                const newQuestions = Array(10).fill().map((_, i) => ({
                    id: this.questionList.length + i + 1,
                    title: `健康问题 ${this.questionList.length + i + 1}`,
                    content: '这是一个关于健康的问题，需要专业的医生来解答。',
                    status: Math.random() > 0.5 ? 'answered' : 'pending',
                    statusText: Math.random() > 0.5 ? '已解答' : '待解答',
                    name: '张先生',
                    avatar: '/static/images/avatar.png',
                    time: '2024-03-20',
                    views: Math.floor(Math.random() * 1000),
                    answers: Math.floor(Math.random() * 100),
                    images: []
                }))
                
                this.questionList = [...this.questionList, ...newQuestions]
                this.loading = false
                this.hasMore = this.page < 3
                this.page++
            }, 1000)
        },
        loadMore() {
            if (this.hasMore && !this.loading) {
                this.loadQuestions()
            }
        },
        onRefresh() {
            this.refreshing = true
            this.page = 1
            this.questionList = []
            
            // 模拟刷新
            setTimeout(() => {
                this.loadQuestions()
                this.refreshing = false
            }, 1000)
        },
        viewQuestion(question) {
            uni.navigateTo({
                url: `/pages/health/qa-detail?id=${question.id}`
            })
        },
        previewImage(images, current) {
            uni.previewImage({
                urls: images,
                current
            })
        },
        askQuestion() {
            uni.navigateTo({
                url: '/pages/health/qa-ask'
            })
        }
    },
    onLoad() {
        this.loadQuestions()
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .search-bar {
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .search-input {
            flex: 1;
            display: flex;
            align-items: center;
            height: 60rpx;
            background-color: #F7F7FA;
            border-radius: 30rpx;
            padding: 0 20rpx;
            margin-right: 20rpx;
            
            input {
                flex: 1;
                height: 100%;
                font-size: 28rpx;
                color: #333;
                margin: 0 20rpx;
            }
        }
        
        .cancel {
            font-size: 28rpx;
            color: #666;
        }
    }
    
    .categories {
        white-space: nowrap;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .category-item {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            margin-right: 40rpx;
            
            &.active {
                .icon {
                    transform: scale(1.1);
                }
                
                text {
                    color: #1890FF;
                }
            }
            
            .icon {
                width: 80rpx;
                height: 80rpx;
                border-radius: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10rpx;
                transition: transform 0.3s;
            }
            
            text {
                font-size: 24rpx;
                color: #666;
            }
        }
    }
    
    .questions {
        height: calc(100vh - 200rpx);
        padding: 20rpx 30rpx;
        
        .question-item {
            background-color: #fff;
            border-radius: 10rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
                
                .title {
                    flex: 1;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-right: 20rpx;
                }
                
                .status {
                    font-size: 24rpx;
                    padding: 4rpx 12rpx;
                    border-radius: 20rpx;
                    
                    &.answered {
                        color: #52C41A;
                        background-color: #F6FFED;
                    }
                    
                    &.pending {
                        color: #FAAD14;
                        background-color: #FFFBE6;
                    }
                }
            }
            
            .content {
                font-size: 28rpx;
                color: #666;
                line-height: 1.6;
                margin-bottom: 20rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            
            .images {
                display: flex;
                flex-wrap: wrap;
                margin: 0 -10rpx 20rpx;
                
                image {
                    width: 200rpx;
                    height: 200rpx;
                    margin: 0 10rpx 20rpx;
                    border-radius: 10rpx;
                }
            }
            
            .footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .user {
                    display: flex;
                    align-items: center;
                    
                    .avatar {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 50%;
                        margin-right: 10rpx;
                    }
                    
                    text {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
                
                .meta {
                    display: flex;
                    
                    .item {
                        display: flex;
                        align-items: center;
                        margin-left: 20rpx;
                        
                        text {
                            font-size: 24rpx;
                            color: #999;
                            margin-left: 10rpx;
                        }
                    }
                }
            }
        }
        
        .loading, .no-more {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30rpx 0;
            
            .loading-icon {
                width: 36rpx;
                height: 36rpx;
                border: 3rpx solid #1890FF;
                border-radius: 50%;
                border-top-color: transparent;
                animation: loading-rotate 0.8s linear infinite;
            }
            
            @keyframes loading-rotate {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            
            text {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }
        }
        
        .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 100rpx 0;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 28rpx;
                color: #999;
            }
        }
    }
    
    .ask-btn {
        position: fixed;
        right: 30rpx;
        bottom: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 120rpx;
        height: 120rpx;
        background-color: #1890FF;
        border-radius: 60rpx;
        padding: 20rpx;
        
        text {
            font-size: 24rpx;
            color: #fff;
            margin-top: 10rpx;
        }
    }
}
</style> 